<nav class="navbar navbar-expand-sm navbar-dark">

  <div class="container">
    <a class="navbar-brand" href="index.html">校园碳账户 |</a>
    <a class="navbar-brand" href="index.html">
      <img src="/img/team.png" alt="CarbonTrack校园碳账户" style="height: 100px;"></a>
    <a class="navbar-brand" href="index.html">CarbonTrack</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <span id="userStatus" class="navbar-text mr-3"></span>
        </li>
        <!--
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact Us</a>
                            </li>-->
        <li class="nav-item">
          <a class="nav-link" href="#" data-toggle="modal" data-target="#registerModal">Register</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Log-in</a>
        </li>
        <li class="nav-item">
          <button id="logoutButton" class=" logoutControl btn btn-sm btn-danger" onclick="logout()"
                  style="display:none;">Logout
          </button>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="logoutControl nav-link " href="#" data-toggle="modal" data-target="#messagesModal"><i
              class="logoutControl fas fa-envelope" style="color: rgba(255, 255, 255, .5);font-size: 24px;"></i></a>
          <div class="badge-container">
            <span id="unreadMessagesCount" class="badge badge-danger" style="display: none;">0</span>
          </div>
        </li>
        <li class="nav-item">
          <a id="logoutButton logoutControl" class=" logoutControl nav-link" href="calculate.html">Accounting Portal</a>
        </li>

        <li class="nav-item">
          <a id="logoutControl" class=" logoutControl nav-link" href="CStore.html">Credits Mall</a>
        </li>
        <li class="nav-item">
          <a id=" logoutControl" class="logoutControl nav-link" href="center.html">User Center</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About Us</a>
        </li>

      </ul>
    </div>
  </div>
</nav>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginModalLabel">User Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="username">Account/Username/Email</label>
            <input type="text" class="form-control" id="username" placeholder="Please enter your Username or Email Address">
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Please enter your Password">
          </div>
          <button type="submit" class="btn btn-login btn-block">Log-in</button>
        </form>
      </div>
      <div class="modal-footer">
        <div class="alert alert-warning" role="alert" id="refreshAlert" style="display: none; cursor: pointer;">
          If failed, please try reload the page or press<a href="#" onclick="location.reload();">here</a>以重新通过Cloudflare防火墙。
        </div>
        <a class="nav-link mr-right" href="iforgot.html">Forgot password?</a>
        <a class="nav-link" href="#" data-toggle="modal" data-target="#registerModal">Register an account</a>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="registerModalLabel">Register new account</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control required-input" id="regusername" placeholder="Please set your Username">
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control required-input" id="regpassword" placeholder="Please set your Password">
          </div>
          <div class="form-group">
            <label for="email">Email Address:</label>
            <input type="email" class="form-control required-input" id="email" name="email" required>
            <!-- 添加发送验证码按钮 -->
            <button type="button" class="btn btn-secondary" id="sendVerificationCode">Send verification code</button>
            <!-- 在注册模态框的表单中添加一个字段 -->
            <div class="form-group">
              <label for="verificationCode">Verification Code</label>
              <input type="text" class="form-control" id="verificationCode" placeholder="Please enter the verification code you received" required>
              <small id="emailHelp" class="form-text text-muted"
                     style="display: none;">The code has been sent to your Email.</small>
            </div>

          </div>
          <button type="submit" class="btn btn-login btn-block">Register</button>
          <div id="registerError" style="display:none;" class="alert alert-danger"></div>
        </form>
        <div class="modal-footer">
          <div class="alert alert-warning" role="alert" id="refreshAlert" style="display: none; cursor: pointer;">
            If failed, please try reload the page or press<a href="#" onclick="location.reload();">here</a>以重新通过Cloudflare防火墙。
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 站内信模态框 -->
<div class="modal fade" id="messagesModal" tabindex="-1" role="dialog" aria-labelledby="messagesModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="messagesModalLabel">Message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-4" id="conversationList">
            <!-- 对话列表将在这里动态加载 -->
          </div>
          <div class="col-8">
            <div id="messageList" style="height: 400px; overflow-y: auto;">
              <!-- 消息列表将在这里动态加载 -->
            </div>
            <div class="input-group mt-3">
              <input type="text" class="form-control" id="messageInput" placeholder="Enter Message...">
              <div class="input-group-append">
                <button class="btn btn-primary" type="button" id="sendMessage">Send</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
